import { SideBar } from "@/components/SideBar";
import { Outlet, useNavigate } from "react-router-dom";
import { Dropdown, Space } from "antd";
import type { MenuProps } from "antd";
import { DownOutlined } from "@ant-design/icons";

export const Layout = () => {
  const navigate = useNavigate();
  const items: MenuProps["items"] = [
    {
      key: "1",
      label: "修改个人信息",
      onClick: () => {
        console.log("修改个人信息");
      },
    },
    {
      key: "2",
      label: "退出登录",
      onClick: () => {
        localStorage.removeItem("token");
        navigate("/login");
      },
    },
  ];

  const userString = localStorage.getItem("userInfo");

  return (
    <div className="flex w-full h-[100vh] bg-[#f0f2f5]">
      <div className="w-[256px] ">
        <div className="h-[50px] flex justify-center items-center text-[20px] border-r-1 border-[#eee] bg-white">RBAC权限管理系统</div>
        <div className="h-[calc(100vh-50px)]">
          <SideBar />
        </div>
      </div>
      <div className="flex-1">
        <div className="h-[50px] bg-white flex justify-between items-center px-[24px]">
          <div>面包屑</div>
          <Dropdown menu={{ items }} placement="bottomRight">
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                {JSON.parse(userString as string).username}
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
        <div className="h-[calc(100vh-50px)] p-[8px] ">
          <div className="bg-white h-full rounded-[4px]">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  );
};
